<template>
  <div class="use-case">
    <el-row style="padding:10px">
      <el-col :span="6">
        <div class="title">接口名称</div>
        <el-input size="mini" v-model="searchText"></el-input>
        <el-table
          ref="singleTable"
          :data="interfaceData"
          highlight-current-row
          @current-change="handleCurrentChange"
          height="550"
          row-class-name="rowCursor">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" type="index" width="55"></el-table-column>
          <el-table-column property="siaName" label="接口名称" show-overflow-tooltip> </el-table-column>
          <el-table-column label="操作" width="90">
            <template slot-scope="scope">
              <i class="el-icon-delete caoz" @click="deleteInterface(scope.$index)"></i>
              <i class="el-icon-view caoz"  @click="showDate(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6" style="padding:0 20px;">
        <div class="title">
          <span>测试用例</span>
          <el-button type="danger" size="mini" class="fr" @click="deleteItem">批量删除</el-button>
          <el-button type="primary" size="mini" class="fr" @click="onClickQuote">引用</el-button>
        </div>
        <el-table
          v-if="isdelete"
          ref="multipleTable"
          :data="useList"
          highlight-current-row
          row-class-name="rowCursor"
          @current-change="handleSelectionChangeUse"
          @selection-change="handleSelectionChange"
          @row-click="rowClick">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" type="index" width="55"></el-table-column>
          <el-table-column prop="useCaseName" label="用例名" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="55" show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="el-icon-delete use-case" @click="deleteCase(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用例名称"  prop="useCaseName">
            <el-input v-model="form.useCaseName" size="mini" disabled placeholder="请输入用例名称" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="请输入备注" disabled v-model="form.remark"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <InterfaceConfig ref="interfaceConfig" v-if="isNode" disabled :node="node"/>
        </div>
        <div>
          <el-button type="primary" @click="goBack" size="mini">上一步</el-button>
          <el-button type="primary" size="mini" @click="addData">保存</el-button>
        </div>
      </el-col>
    </el-row>
    <CaseList v-if="dialogVisibleCase" ref="caseList" @useListCall="useListCall" :history-list="useList" @closeCaseCall="closeCaseCall" :type="type" :dialogVisibleCase="dialogVisibleCase" :node="node"/>
  </div>
</template>
<script>
  import InterfaceConfig from '@/rdComponent/common/InterfaceConfig'
  import CaseList from '../../useCase/component/CaseList'
    export default {
        name: "addConfig",
        components: {
          InterfaceConfig,
          CaseList
        },
        props:{
          interfaceData: {
            type: Array,
            default: [],
            required: true
          }
        },
        data(){
          return {
            searchText: '',
            dialogVisibleCase: false,
            node: null,
            isNode: true,
            useList: [],
            type: 2,//集成测试引用
            isdelete: true,//删除刷新
            form: {},
          }
        },
        created(){
          this.isNode=false
          this.node = this.interfaceData[0];
          this.$nextTick(()=>{
            this.isNode=true
          })
        },
        methods:{
          /**获取选择接口用例数据结构**/
          getInterfaces(){
            let interfaces = [];
            this.interfaceData.forEach((item)=> {
              let interfacesItem = {
                assos: []
              };
              if (item.useData) {
                item.useData.forEach(i => {
                  interfacesItem.assos.push({
                    tucId: i.id
                  })
                });
              }
              interfacesItem.interfaceId = item.siaId;
              interfacesItem.interfaceName = item.siaName;
              interfaces.push(interfacesItem);
            });
            return interfaces;
          },
          //关闭弹窗
          closeCaseCall() {
            this.dialogVisibleCase = false
          },
          //关闭弹窗
          closeCall(){
            this.$emit('closeConfig')
          },
          //测试用例
          handleSelectionChangeUse(row){
            this.node.updateInterfaceJson = JSON.parse(row.inBody);
            this.node.updateParamsJson = {
              inHeader: JSON.parse(row.inHeader),
              inQuery: JSON.parse(row.inQuery)
            };
            this.node.updateAssertJson = row.assertConditions;
          },
          //删除测试用例
          deleteItem(){
            if(this.multipleSelection!=undefined && this.multipleSelection.length>0){
              this.useList.forEach((item,index)=>{
                this.multipleSelection.forEach((e,i)=>{
                  if(e.id==item.id){
                    this.useList.splice(index,1)
                  }
                })
              })
              this.isdelete=false
              this.$nextTick(()=>{
                this.isdelete=true
              })
            }else{
              this.$message({message: '请选择删除项',type: 'warning'});
            }
          },
          //删除当前接口
          deleteInterface(index){

          },
          //查看详情
          showDate(data){

          },
          //选中的接口
          handleCurrentChange(row){
            this.node = row
            this.interfaceData.forEach((item,index)=>{
              if(item.siaId==row.siaId){
                this.useList = row.useData
              }
            })
          },
          /**单击行**/
          rowClick(data) {
            this.$refs['form'].resetFields();
            this.axios.get(this.interfaceUrl.path+'/test/use/case/'+data.id)
              .then((res)=>{
                this.node.updateInterfaceJson = JSON.parse(res.data.data.inBody);
                this.node.updateParamsJson = {
                  inHeader: JSON.parse(res.data.data.inHeader),
                  inQuery: JSON.parse(res.data.data.inQuery)
                };
                this.node.updateAssertJson = res.data.data.assertConditions;
                this.isNode = false;
                this.$nextTick(() => {
                  this.isNode = true;
                })
                this.form = {
                  useCaseName: res.data.data.useCaseName,
                  remark: res.data.data.remark
                }
              })
          },
          //删除选中的测试用例
          deleteCase(data){
            this.multipleSelection=[]
            this.multipleSelection.push(data)
            this.deleteItem()
            this.multipleSelection=[]
          },
          //选中的row
          handleSelectionChange(val){
            this.multipleSelection = val;
          },
          //引用
          onClickQuote(){
            this.dialogVisibleCase = false
            this.$nextTick(()=>{
              this.dialogVisibleCase = true
            })
          },
          //引用回调
          useListCall(data){
            this.useList=data.useList
            this.interfaceData.forEach((item,index)=>{
              if(item.siaId==data.id){
                this.interfaceData[index].useData = data.useList
              }
            })

            this.dialogVisibleCase = false
          }
        }
    }
</script>

<style scoped lang="less">

</style>
